<template>
  <div class="allpay">
    <!-- 头部tab -->
    <div class="header-wrap">
      <span class="header-wrap-left" @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">费用缴纳</span>
      <span class="header-wrap-right newsbox">
        <!-- <i class="iconseach iconfont icon-tongzhi"></i>
        <span class="news"></span> -->
      </span>
    </div>
    <!-- tabs -->
    <van-tabs
      v-model="activeName"
      animated
      :swipeable='true'
      :border='false'
      title-inactive-color="#57c5c6"
      title-active-color="#FD5585"
      background='#fff'
      line-width = '50%'
      line-height = '0.02rem'
      @change=onChange(activeName)
    >
    <van-tab
      v-model="activeName"
      v-for="(list,index) in listData"
      :key="index"
      :title="list.name"
      :name="list.id"
      >
      <div style="min-height:calc(100vh - 1rem);" >
        <!-- 自助缴费 -->
        <div class="allpay-list" style="height: 2rem;" v-if="index==0&&modular_selfpay==1">
          <div class="img-box">
            <div class="img-content">
              <img src="@/assets/images/ic_pickages.png" alt="">
            </div>
          </div>
          <div class="pay-content" style="padding-top: .55rem" @click="toselfpay()" >
            <span>自助缴费</span>
            <span>自助办理各项缴费事宜</span>
          </div>
        </div>
        <!-- 待缴费列表 -->
        <div v-if="index==0">
          <div>
            <Pending v-for="(item,index) in pendingData" :key="index" :message='item'/>
            <span v-if="pendingData.length>=2" class="submit" @click="keypayment(pendingData)">一键缴费</span>
          </div>
        </div>
        <!-- 已缴费列表 -->
        <div v-if="index==1">
          <Paymented  v-for="(item,index) in itemData" :key="index" :message='item'/>
        </div>
      </div>
    </van-tab>
    </van-tabs>
    <Tips v-if="show&&activeName==1"/>
  </div>
</template>
<script>
import api from '../../api/api.js'
import { Tab, Tabs } from 'vant';
import Pending from './components/pending'
import Paymented from './components/paymented'
import Tips from '../../components/tips'
export default {
  data(){
    return{
       ids: [],
       pendingData:[],
       show:false,
       length: null,
       activeName: '',
       modular_selfpay:'',
       listData:[
         {
           id:'0',
           name: '待缴纳',
         },
         {
           id:'1',
           name: '已缴纳',
         }

       ],
       itemData:[]
    }
  },
  created(){
    this.getMineTrip()
    this.menu()
    this.quarters()
  },
  methods:{
    menu(){
      window.scrollTo(0, 0)
    },
    goback(){
      this.$router.go(-1)
      // window.location.href = 'https://mall.nengyoukeji.com/app/index.php?i=23&c=entry&m=ewei_shopv2&do=mobile&wxref=mp.weixin.qq.com#wechat_redirect'
    },
   // 执行缴费列表
    getMineTrip() {
      this.pending()
    },

    // 获取已缴费列表
    Paymented(){
      this.$get(api.Paymented, {})
      .then(response => {
        if (response.data.code === 1) {
          this.itemData = response.data.data.list
          this.length = response.data.data.list.length
          if(this.length<=0){
            this.show = true
          }else{
            this.show = false
          }
        }
      })
      .catch((error) => {
        console.log(error);
      })
    },
    // 获取待缴费列表
   pending(){
    this.$get(api.pending, {
      params: {
        pay_status: 0
      }
    })
    .then(response => {
      if (response.data.code === 1) {
        this.pendingData = response.data.data.list
      }
    })
    .catch((error) => {
      console.log(error);
    })
    },
		// 缴费列表
		onChange(id){
      console.log('id',id)
      if(id == 0){
        this.pending()
      }
		  if(id == 1){
		    this.Paymented()
		  }
    },
    quarters(){
      this.$get(api.quarters,{})
      .then((response) => {
        if(response.data.code==1){
          this.modular_selfpay = response.data.data.modular_selfpay
          console.log('modular_selfpay',this.modular_selfpay)
        }
      })
      .catch((error) => {
        console.log(error);
      });
    },
  //  keypayment(change){
  //   const back_url=encodeURIComponent(encodeURIComponent(window.location.href));
  //   change.forEach((element,index) => {
  //     this.ids.push(element.id)
  //     console.log('ids',this.ids)
  //   });
  //   this.$get(api.keypayment, {
  //     params: {
  //       ids: this.ids,
  //       back_url:back_url,
  //       from_type:'Money'
  //     }
  //   })
  //   .then(response => {
  //     if (response.data.code == 1) {
  //       console.log(1111);
  //     }
  //   })
  //   .catch((error) => {
  //     console.log(error);
  //   })
  //   },
    // 一键缴费
    keypayment(change){
      change.forEach((element,index) => {
        this.ids.push(element.id)
      });
      const back_url=encodeURIComponent(encodeURIComponent(window.location.href));
      console.log(back_url)
      window.location.href = api.keypayment + '?ids='+this.ids.join(',')+'&from_type=Money'+'&back_url='+ back_url;
    },

    toselfpay(){
      this.$router.push('/userPay')
    },

  },
  components:{
    [Tab.name]:Tab,
    [Tabs.name]:Tabs,
    Pending,
    Paymented,
    Tips
  }
}
</script>
<style>
.allpay .van-tabs__wrap{
  z-index: 1000;
  width: 100%;
  /* border-bottom: 1px solid #423B6F; */
  position: fixed;
  top: 1rem;
  left: 0;
}
.allpay .van-tab, .van-tab--active{
  font-weight: bold;
}
.allpay .van-tabs--line{
  padding-top: 2rem;
}
</style>
<style scoped>
.allpay-list{
  display: flex;
  height: 2.5rem;
  background: #fff;
  margin: .25rem .3rem;
  border-radius: .2rem;
}
.img-box{
  flex: 1.5;
}
.img-content{
  position: relative;
  margin: .38rem auto 0;
  width:1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #0EAD69;
}
.img-content img{
  position: absolute;
  left: calc(50% - .21rem);
  top: calc(50% - .22rem);
  width: .42rem;
  height: .44rem;
}
.pay-content{
  padding-top: .45rem;
  flex: 3;
}
.pay-content span{
  display: block;
}
.pay-content span:nth-of-type(1){
  font-weight: bold;
  font-size: .32rem;
  color: #000;
}
.pay-content span:nth-of-type(2){
  color: #57c5c6;
  margin-top: .1rem;
}
.newsbox{
  position: relative;
}
.news{
  display: block;
  position: absolute;
  right: 22%;
  top: 18.5%;
  width: .15rem;
  height: .15rem;
  text-align: center;
  border-radius: 50%;
  background: #FF001f;
}
.submit{
  display: block;
  margin: .5rem auto 0;
  color: #fff;
  height: 1rem;
  line-height: 1rem;
  border-radius: .5rem;
  width: 88%;
  background-image: -webkit-gradient(linear,left top,right top,from(#ffc796),to(#fd5585));
  background-image: linear-gradient(90deg,#ffc796,#fd5585);
  border-radius: .45rem;
  text-align: center;
  font-weight: 700;
}
</style>
